<template>
  <div class="footer">
    <div class="item" active-class="nav-color">
        <router-link to="/home" class="nav-item"  active-class="nav-color">
            <van-icon name="wap-home-o" :size="23"/>首页
        </router-link>
    </div>
    <div class="item">
        <router-link to="/cart" class="nav-item"  active-class="nav-color">
            <van-icon name="bag-o"  :size="23"/>购物车
        </router-link>
    </div>
    <div class="item">
        <router-link to="/order" class="nav-item"  active-class="nav-color">
            <van-icon name="sign" :size="23" />订单
        </router-link>
    </div>
    <div class="item">
        <router-link to="/mine" class="nav-item" active-class="nav-color">
            <van-icon name="contact" :size="23" />我的
        </router-link>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.footer{
    padding: 0px 0px 10px 0px;
    display: flex;
    background-color: #ffffff;
    border-top: 0.5px solid #eee;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    .item{
        flex: 1;
        display: flex;
        justify-content: center;
        i{
            color: black;
            border: rgb(255, 255, 255) 6px solid; 
            font-weight: 600;
        }
        .nav-color{
            color: rgb(24, 24, 24);
           i{
            background-image: linear-gradient(-145deg,rgba(240, 237, 14, 0.924),rgba(255, 217, 0, 0.8));           
            border-radius: 50%;
            padding: 5px;
            animation-name: scaleAnimation;
            animation-duration: .2s;      
            animation-fill-mode: forwards;  
            box-sizing: content-box; 
            box-shadow:  0px -1px 0px 0px #eee;
            border: rgb(255, 255, 255) 6px solid; 
           }
           @keyframes scaleAnimation { // 动画设置
            0% {
                transform: scale(1) translateY(-0px);
            }

            25% {
                transform: scale(1.05) translateY(-2px);
            }

            50% {
                transform: scale(1.1) translateY(-20px);
            }
            75% {
                transform: scale(1.15) translateY(-20px);
            }
            100% {
                transform: scale(1.2) translateY(-8px);
            }
        }
        }
        .nav-item{
            i{         
            padding: 5px;
            }
            display: flex;
            flex-flow: column;
            align-items: center;
            font-size: 12px;
        }
    }
}
</style>